<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="vm-group">
  <lv-form [formGroup]="formGroup" [lvLabelColon]="false" class="formGroup">
    <lv-form-item>
      <lv-form-label lvRequired>{{groupNameLabel}}</lv-form-label>
      <lv-form-control [lvErrorTip]="baseUtilService.nameErrorTip">
        <input lv-input type="text" formControlName="name" />
      </lv-form-control>
    </lv-form-item>

  <div style="margin-top:20px">
    <h2 style="margin-bottom:20px">
      {{'protection_select_resource_label' | i18n}}<i lv-icon="aui-icon-help" lv-tooltip="{{'protection_select_resource_tips_label' | i18n}}"
        lvTooltipTheme="light" class="configform-constraint" lvColorState="true"></i>
    </h2>
    <ng-container
      *ngIf="includes([dataMap.Resource_Type.virtualMachine.value,dataMap.Resource_Type.FusionCompute.value,dataMap.Resource_Type.cNwareVm.value, dataMap.Resource_Type.hyperVVm.value],subUnitType)">
      <lv-form-item>
        <lv-form-label>
          {{'protection_computer_location_label' | i18n}}
        </lv-form-label>
        <lv-form-control>
          <lv-select [lvOptions]='vCenterOptions' formControlName="selectedVCenter" lvValueKey="key" lvShowFilter
            lvFilterMode="contains" lvFilterKey='label'>
          </lv-select>
          <div [ngClass]="{'tree-container':treeData.length,'no-data':!treeData.length}">
            <lv-tree [lvData]="treeData" lvShowLine lvSelectionMode="single" [(lvSelection)]="treeSelection2" #resTree
              (lvExpandedChange)="expandedChange($event)" (lvCheck)="nodeCheck($event)" lvShowContentIcon>
            </lv-tree>
          </div>
        </lv-form-control>
      </lv-form-item>
    </ng-container>
    <lv-form-item>
      <lv-form-label></lv-form-label>
      <lv-form-control>
    <lv-transfer #transfer [lvSourceColumns]="sourceColumns"
      [lvSourceData]="sourceData" [lvSourceSelection]="sourceSelection" [lvTargetColumns]="targetColumns" [lvTitles]="['common_optional_label' | i18n, 'common_selected_label' | i18n]"
      (lvStateChange)="stateChange($event)" (lvSelectionChange)="change($event)" lvAsync="true" [lvTotal]="total" [lvItemSize]="20" lvDataKey="uuid"></lv-transfer>
  </lv-form-control>
</lv-form-item>
  </div>
</lv-form>
